<template>
  <div>
    <van-tabbar v-model="active" active-color="#a8622f" route>
      <van-tabbar-item to="/">主页
        <template #icon="props">
          <img src="@/assets/tab/home.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/tu">
        图鉴
        <template #icon="props">
          <img src="@/assets/tab/tujian.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/gong">
        攻略
        <template #icon="props">
          <img src="@/assets/tab/gonglue.png" />
        </template>
      </van-tabbar-item>

    </van-tabbar>
  </div>
</template>

<script>
import {
  useRoute,
  useRouter
} from "vue-router";
import {
  toRefs,
  reactive,
  computed
} from "vue";
export default {
  name: "TbaBar",
  props: {},
  setup (props, {
    emit
  }) {
    const data = reactive({
      active: 0,
    });

    const route = useRoute();
    const router = useRouter();

    return {
      ...toRefs(data)
    };
  },
};
</script>
<style lang="scss" scoped>
</style>
